<style lang="less">
</style>

<template>
  <Card>
    <Tabs :value="paneName" type="card" @on-click="clickTabPane">
      <TabPane label="学历统计" name="1">
        <div class="echarts">
          <chart :options="options1"></chart>
        </div>
      </TabPane>
      <TabPane label="职业统计" name="2">
        <div class="echarts">
          <chart :options="options2"></chart>
        </div>
      </TabPane>
      <TabPane label="信息来源统计" name="3">
        <div class="echarts">
          <chart :options="options3"></chart>
        </div>
      </TabPane>
    </Tabs>
  </Card>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        data () {
            return {
                paneName: '1',
                baseURL: '/user/statistics',
                data1: [],
                data2: [],
                // 学历的数据
                options1: {
                    backgroundColor: '#404A59',
                    color: ['#ffd285', '#ff733f', '#ec4863'],
                    title: [{
                        text: '学历统计',
                        left: '40%',
                        top: '6%',
                        textStyle: {
                            color: '#ffd285'
                        }
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    grid: {
                        left: '5%',
                        right: '35%',
                        top: '16%',
                        bottom: '6%',
                        containLabel: true
                    },
                    toolbox: {
                        'show': false,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        boundaryGap: true, // false时X轴从0开始
                        // x轴数据
                        data: ['小学', '初中', '高中', '大学', '研究生', '博士生', '未填写']
                    },
                    yAxis: {
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            smooth: true,
                            type: 'bar',
                            barMaxWidth: 40,
                            symbolSize: 4,
                            symbol: 'circle',
                            data: [0, 0, 0, 0, 0, 0]
                        },
                        {
                            type: 'pie',
                            center: ['83%', '50%'],
                            radius: '55%',
                            name: '饼图',
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            data: [
                                {value: 0, name: '小学'},
                                {value: 0, name: '初中'},
                                {value: 0, name: '高中'},
                                {value: 0, name: '大学'},
                                {value: 0, name: '研究生'},
                                {value: 0, name: '博士生'},
                                {value: 0, name: '未填写'}
                            ]
                        }
                    ]
                },
                // 职业统计数据
                options2: {
                    backgroundColor: '#404A59',
                    color: ['#ffd285', '#ff733f', '#ec4863'],
                    title: [{
                        text: '职业统计',
                        left: '40%',
                        top: '6%',
                        textStyle: {
                            color: '#ffd285'
                        }
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    grid: {
                        left: '5%',
                        right: '35%',
                        top: '16%',
                        bottom: '6%',
                        containLabel: true
                    },
                    toolbox: {
                        'show': false,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        boundaryGap: true, // false时X轴从0开始
                        // x轴数据
                        data: ['公司职员', '运动员', '演艺业', '学生', '记者', '公务员', '其他', '未填写']
                    },
                    yAxis: {
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            smooth: true,
                            type: 'bar',
                            barMaxWidth: 40,
                            symbolSize: 4,
                            symbol: 'circle',
                            data: [0, 0, 0, 0, 0, 0]
                        },
                        {
                            type: 'pie',
                            center: ['83%', '50%'],
                            radius: '55%',
                            name: '饼图',
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            data: [
                                {value: 0, name: '公司职员'},
                                {value: 0, name: '运动员'},
                                {value: 0, name: '演艺业'},
                                {value: 0, name: '学生'},
                                {value: 0, name: '记者'},
                                {value: 0, name: '公务员'},
                                {value: 0, name: '其他'},
                                {value: 0, name: '未填写'}
                            ]
                        }
                    ]
                },
                // 信息来源统计数据
                options3: {
                    backgroundColor: '#404A59',
                    color: ['#ffd285', '#ff733f', '#ec4863'],
                    title: [{
                        text: '信息来源统计',
                        left: '40%',
                        top: '6%',
                        textStyle: {
                            color: '#ffd285'
                        }
                    }],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    grid: {
                        left: '5%',
                        right: '35%',
                        top: '16%',
                        bottom: '6%',
                        containLabel: true
                    },
                    toolbox: {
                        'show': false,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        boundaryGap: true, // false时X轴从0开始
                        // x轴数据
                        data: ['官方微信', '官方微博', '个人微信', '个人微博', '官方网站', '官方APP', '报纸', '电视', '电台', '朋友介绍', '家人推荐', '框架广告', '未填写']
                    },
                    yAxis: {
                        'axisLine': {
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#c0576d'
                            }
                        },
                        'axisTick': {
                            'show': false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffd285'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            smooth: true,
                            type: 'bar',
                            barMaxWidth: 40,
                            symbolSize: 4,
                            symbol: 'circle',
                            data: [0, 0, 0, 0, 0, 0]
                        },
                        {
                            type: 'pie',
                            center: ['83%', '50%'],
                            radius: '55%',
                            name: '饼图',
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            data: [
                                {value: 0, name: '官方微信'},
                                {value: 0, name: '官方微博'},
                                {value: 0, name: '个人微信'},
                                {value: 0, name: '个人微博'},
                                {value: 0, name: '官方网站'},
                                {value: 0, name: '官方APP'},
                                {value: 0, name: '报纸'},
                                {value: 0, name: '电视'},
                                {value: 0, name: '电台'},
                                {value: 0, name: '朋友介绍'},
                                {value: 0, name: '家人推荐'},
                                {value: 0, name: '框架广告'},
                                {value: 0, name: '未填写'}
                            ]
                        }
                    ]
                }
            };
        },
        methods: {
            clickTabPane (name) {
                if (name === '1') {
                    this.search(1)
                } else if (name === '2') {
                    this.search(2)
                } else if (name === '3') {
                    this.search(3)
                }
                this.paneName = name
            },
            search (type) {
                let url = this.baseURL + '/patient/' + type
                this.$ajax.get(url).then(r => {
                    let {code, data, msg} = r.data
                    if (code === 0) {
                        if (type === 1) {
                            this.options1.series[0].data = data.data1
                            this.options1.series[1].data = data.data2
                        } else if (type === 2) {
                            this.options2.series[0].data = data.data1
                            this.options2.series[1].data = data.data2
                        } else if (type === 3) {
                            this.options3.series[0].data = data.data1
                            this.options3.series[1].data = data.data2
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                this.search(1)
            }
        },
        mounted () {
            this.paneName = '1'
            this.init()
        },
        watch: {
            '$route' (to) {
                if (to.path === '/statistics/patient') {
                    this.init()
                }
            }
        }
    }
</script>

<style>
  .echarts {
    width: 100% !important;
    height: 700px !important;
  }
</style>
